<template>
    <div>
        <el-row class="demo-avatar demo-basic">
            <el-col :span="12">
                <div class="demo-basic--circle">
                    <div class="block">
                    <el-avatar shape="square" :size="50" :src="userInfo.headimgurl" class="stuHeader"></el-avatar>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-descriptions title="我的中心" border :column="2">
            <el-descriptions-item label="Unid">{{userInfo.unid}}</el-descriptions-item>
            <el-descriptions-item label="账号">{{userInfo.nickname}}</el-descriptions-item>
            <el-descriptions-item label="vip等级">{{userInfo.vipLevel}}</el-descriptions-item>
            <el-descriptions-item label="vip到期时间">{{userInfo.vipExpires}}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{userInfo.nickname}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{userInfo.phone}}</el-descriptions-item>
            <el-descriptions-item label="角色名称">{{userInfo.roleName}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{userInfo.sex}}</el-descriptions-item>
            <el-descriptions-item label="省份">{{userInfo.province}}</el-descriptions-item>
            <el-descriptions-item label="城市">{{userInfo.city}}</el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script>
    import {mapState} from "vuex"
    export default{
        data(){
            return{

            }
        },
        computed:{
            ...mapState(["userInfo"])
        }
    }
</script>
<style>
    .block{
        margin: 100px 0 30px 450px;
    }
    .stuHeader{
        width: 200px !important;
        height: 200px !important;
    }
</style>